<template>
  <div id="out">
			<div class="top">
				<div class="top1">单品收藏</div>
				<div class="top2">个性收藏</div>
			</div>
			<div class="mid">预留图片展示位</div>
			<div class="cont">
				<div class="c-left">
					<img src="/static/imgs_s11/s011_Cocktail.png" >
				</div>
				<div class="c-right">
					<div class="c-right1">RIO锐澳鸡尾酒微醺（六种口味）洋酒预调酒果酒混合装275ml*6瓶</div>
					<div class="c-right2">¥72.90</div>
					<div class="c-right3">
						<img src="/static/imgs_s11/s011_collection.png" >
					</div>
					<div class="c-right4">已收藏</div>
				</div>
			</div>
			<div class="cont">
				<div class="c-left">
					<img src="/static/imgs_s11/s011_wine.png" >
				</div>
				<div class="c-right">
					<div class="c-right1">RIO锐澳鸡尾酒微醺（六种口味）洋酒预调酒果酒混合装275ml*6瓶</div>
					<div class="c-right2">¥72.90</div>
					<div class="c-right3">
						<img src="/static/imgs_s11/s011_collection.png">
					</div>
					<div class="c-right4">已收藏</div>
				</div>
			</div>
			<div class="cont">
				<div class="c-left">
					<img src="/static/imgs_s11/s011_Cocktail.png" >
				</div>
				<div class="c-right">
					<div class="c-right1">RIO锐澳鸡尾酒微醺（六种口味）洋酒预调酒果酒混合装275ml*6瓶</div>
					<div class="c-right2">¥72.90</div>
					<div class="c-right3">
						<img src="/static/imgs_s11/s011_collection.png" >
					</div>
					<div class="c-right4">已收藏</div>
				</div>
			</div>
			<div class="cont">
				<div class="c-left">
					<img src="/static/imgs_s11/s011_wine.png" >
				</div>
				<div class="c-right">
					<div class="c-right1">RIO锐澳鸡尾酒微醺（六种口味）洋酒预调酒果酒混合装275ml*6瓶</div>
					<div class="c-right2">¥72.90</div>
					<div class="c-right3">
						<img src="/static/imgs_s11/s011_collection.png" >
					</div>
					<div class="c-right4">已收藏</div>
				</div>
			</div>
		</div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
			#out{
				width: 375px;
				height: 667px;
				background-color: rgb(244,244,244);
				border:#F0F0F0 solid 1px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
			}
			#out .top{
				height: 36px;
				background-color: white;
				margin-top: 60px;
				display:flex;
			}
			#out .top .top1{
				width: 52px;
				height: 23px;
				font-size: 13px;
				margin: 11px 68px;
				color: #666666;
				border-bottom: #32B16C solid 2px;
				color: #32B16C;
				
			}
			#out .top .top2{
				font-size: 13px;
				width: 55px;
				height: 23px;
				margin-top: 11px;
				margin-left: 60px;
				
				
			}
			#out .mid{
				height: 75px;
				margin-top: 10px;
				text-align:center;
				background-color: #E0E0E0;
				font-size: 20px;
				color: #B2B1B1;
				line-height: 75px;
				margin-bottom: 15px;
			}
			#out .cont{
				background-color: white;
				margin-top: 10px;
				height: 132px;
				display: flex;
			}
			#out .cont .c-left img{
				width: 109px;
				height: 109px;
				margin: 12px 10px;
			}
			#out .cont .c-right1{
				width: 228px;
				height: 28px;
				font-size: 10px;
				margin-top: 20px;
			}
			#out .cont .c-right2{
				width: 45px;
				height: 11px;
				font-size: 11px;
				color: #EB1F1F;
				margin-top: 30px;
			}
			#out .cont .c-right3 img{
				width: 18px;
				height: 18px;
				
				margin-left: 210px;
			}
			#out .cont .c-right4{
				font-size: 10px;
				color: #32B16C;
				margin-left: 200px;
				margin-top: -5px;
			}
			
			
		</style>
